<template>
  <div class="index">
    <!-- <div v-if="normal == true"> -->
      <ul class="tabTit">
        <li v-for="(item,index) in tabs" :class="{active:index == num}" @click="tab(index)">{{item}}</li>
      </ul>
      <div class="tabCon">
        <ul>
          <li class="list" v-for="(itemCon,index) in tabContent0" v-show="0 == num">
            <p class="list_tit">预约时间：{{itemCon.meal_date}} {{itemCon.meal_time}}</p>
            <div class="list_main flex">
              <div class="list_l">
                <p>订单编号：</p>
                <p>下单时间：</p>
                <p>支付方式：</p>
                <p>客户：</p>
                <p>车辆：</p>
                <p>车牌号：</p>
                <p>地址：</p>
              </div>
              <div class="list_r">
                <p>{{itemCon.ordersn}}</p>
                <p>{{itemCon.dateline}}</p>
                <p v-if="itemCon.pay_type == 1">余额支付</p><p v-if="itemCon.pay_type == 2">在线支付</p><p v-if="itemCon.pay_type == 4">次卡支付</p>
                <p>{{itemCon.username}}</p>
                <p>{{itemCon.car_name}} {{itemCon.car_models}} {{itemCon.name}}</p>
                <p>{{itemCon.mycard_sn}}</p>
                <p>{{itemCon.address}}</p>
              </div> 
              <!-- <p class="order_addr">地址详情：{{itemCon.addr_detail}}</p> -->
            </div>
            <p class="order_addr">地址详情：{{itemCon.addr_detail}}</p>
            <div class="list_btn list_btn1 flex" v-if="itemCon.status == 1">
              <button class="list_btn_blue" @click="orderTaking(itemCon.id)">接单</button>
              <a class="list_btn_blue" :href="'tel:'+itemCon.tel">联系客户</a>
              <button class="list_btn_red" @click="toOrderCanceling(itemCon.id)">拒绝</button>
            </div>
            <div class="list_btn list_btn2 flex" v-if="itemCon.status >= 2 & itemCon.status != 6">
              <button class="list_btn_blue" @click="toOrdering(itemCon.id)" v-if="itemCon.status <= 2">开始服务</button>
              <!-- <button class="list_btn_blue">联系客户</button> -->
              <a class="list_btn_blue" :href="'tel:'+itemCon.tel">联系客户</a>
              <button class="list_btn_blue" @click="openLocation(itemCon.lat,itemCon.lng,itemCon.address)">一键导航</button>
              <button class="list_btn_red" @click="toOrderCanceling(itemCon.id)" v-if="itemCon.status <= 2">取消订单</button>
            </div>
            <div class="list_sum">
              <!-- <p>订单金额</p>
              <p class="list_sum_actual">{{itemCon.totalprice}}</p> -->
              <p>实际收入</p>
              <p class="list_sum_actual">{{itemCon.commission}}元</p>
            </div>
          </li>
        </ul>
        <ul>
          <li class="listing" v-for="(itemCon,index) in tabContent1" v-show="1 == num" @click="toOrderCancel(itemCon.id)">
            <p class="flex"><i class="iconfont list_icon icon-dian"></i>订单编号：{{itemCon.ordersn}}</p>
            <p class="flex"><i class="iconfont list_icon icon-dian"></i>下单时间：{{itemCon.dateline}}</p>
            <p class="flex"><i class="iconfont list_icon icon-dian"></i>预约时间：{{itemCon.meal_date}} {{itemCon.meal_time}}</p>
            <button class="listed_btn">详情</button>
          </li>
        </ul>
        <ul>
          <li class="listed" v-for="(itemCon,index) in tabContent2" v-show="2 == num" @click="toOrderOver(itemCon.id)">
              <p class="flex"><i class="iconfont list_icon icon-dian"></i>订单编号：{{itemCon.ordersn}}</p>
              <p class="flex"><i class="iconfont list_icon icon-dian"></i>下单时间：{{itemCon.dateline}}</p>
              <p class="flex"><i class="iconfont list_icon icon-dian"></i>预约时间：{{itemCon.meal_date}} {{itemCon.meal_time}}</p>              
              <button class="listed_btn">详情</button>
          </li>
        </ul>
      </div>
      <!-- 提示 -->
      <div class="tips_out" v-if="tips == 1" @click="closeTips"></div>
      <div class="tips" v-if="tips == 1">请先完成已开始服务的订单！</div>
      <!-- 更新经纬度 -->
      <lat-lng></lat-lng>
    <!-- </div> -->
    <!-- <div style="padding: 1rem;" v-else>您已经开始服务，或者您的账号被隐藏，详情请<a style="color: #5594FF;text-decoration:blink;line-height: 2rem;" href="tel:0510-87830003">咨询客服</a> ！</div> -->
    <!-- 底部导航 -->
    <div class="tab">
      <ul class="tab_main flex">
        <li class="tab_li active" @click="toIndex">
          <div>
            <i class="iconfont icontab icon-home2"></i>
          </div>
          <p>首页</p>
        </li>
        <li class="tab_li" @click="toWashOrdering">
          <div>
            <i class="iconfont icontab icon-time1"></i>
          </div>
          <p>进行中</p>
        </li>
        <li class="tab_li" @click="toUser">
          <div>
            <i class="iconfont icontab icon-wode2"></i>
          </div>
          <p>我的</p>
        </li>
      </ul>
    </div>
  </div>
</template>




<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
import wx from 'weixin-js-sdk'
let Base64 = require('js-base64').Base64;
export default {
  inject: ['reload'],
  name: 'index',
  data () {
    return {
      // normal: true,
      num: 0,
      tabs: ["我的订单", "已取消","已完成"],
      tabContent0: [],
      tabContent1: [],
      tabContent2: [],
      isbuy: 0,//判断是否有未完成的接口（1：有；0没有）
      tips: 0,
      jssdk: {}, //jssdk中config的信息
    }
  },
  mounted() {
    this.getInfo();
    this.$root.washShare();
    // this.getInfoAll();
    // this.getInfoCancel();
    // this.getInfoOver();
  },
  methods: {
    // tab
    tab(index) {
      this.num = index;
    },
    // 到 —— 取消列表的详情页
    toOrderCancel(index){
      global.order_id = index;
      this.$router.push({
        name:'washorderCancel',
      })
    },
    // 到 —— 完成列表的详情页
    toOrderOver(index){
      global.order_id = index;
      this.$router.push({
        name:'washorderOver',
      })
    },
    // 底部导航 —— 首页
    toIndex(){
      this.$router.push({path:'/wash'})
    },
    // 底部导航 —— 进行中
    toWashOrdering(){
      // global.order_wid = 39;
      this.$router.push({path:'/washordering'})
    },
    // 底部导航 —— 我的
    toUser(){
      this.$router.push({path:'/washuser'})
    },
    // 接单
    orderTaking(index){
      console.log('点击');
      var that = this;
      axios.get(global.api.order.worker.receive,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          orderid: index,
        }
      })
      .then(function(res){
        console.log("orderTaking then");
       
         if (res.data.error == 0) {

            location.reload();
         
         }else{
           alert(res.data.msg);
         }
      })
      .catch(function(res){
        console.log("orderTaking catch");
        console.log(res);
      })
    },
    // 取消订单
    toOrderCanceling(index){
      this.$router.push({
        name:'washorderCanceling',
        params: {
          order_id: index
        }
      })
    },
    // 开始服务
    toOrdering(index){
      
      console.log('开始服务')
      var that = this;
     
        axios.get(global.api.order.worker.servce,{
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            orderid: index,
          }
        })
        .then(function(res){
         
          // alert(JSON.stringify(res))

            that.$router.push({path:'/washordering'})
          
        })
        .catch(function(res){
          

        }) 
    
    },
    // 关闭提示
    closeTips(){
      this.tips = 0;
    },
    // 信息获取
    getInfo(){
      var that = this;
      var pathUrl = window.location.href.split('#')[0];
      pathUrl = Base64.encode(pathUrl);
      axios.all([
        axios.get(global.api.order.worker.list,{  //我的订单
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            status: 2,
            type: 1,
            page: 1,
          }
        }),
        axios.get(global.api.order.worker.list,{  //已取消
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            status: -1,
            type: 1,
            page: 1,
          }
        }),
        axios.get(global.api.order.worker.list,{  //已完成
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            status: 1,
            type: 1,
            page: 1,
          }
        }),
        axios.get(global.api.index.junior,{  //判断用户是否是小伙伴
          params: {
            uuid: localStorage.getItem('carWashUuid'),
          }
        }),
        axios.get(global.api.user.jssdk,{  //jssdk
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            url: pathUrl,
          }
        }),
      ])
      .then(axios.spread(function(tabContent0,tabContent1,tabContent2,junior,jssdk){
        that.isbuy = tabContent0.data.isbuy;
        that.tabContent0 = tabContent0.data.list;
        that.tabContent1 = tabContent1.data.list;
        that.tabContent2 = tabContent2.data.list;
        that.jssdk = jssdk.data.content;

        // if (junior.data.code == 0) {
        //   if (junior.data.data.isshow == 2) {
        //     that.$router.push({path:'/enterRevise'})
        //   }
        //   //  else if (junior.data.data.isshow == 1) {
            
        //   // } else {
        //   //   that.$router.push({path:'/enter'})
        //   // }
        // } else if (junior.data.code == 1) {
        //   that.$router.push({path:'/enter'})
        // }
        if (junior.data.data.code == 0) {
          if (junior.data.data.isshow == 0) {
            // alert("您的账号有异常，详情请询问管理员！");
            // that.normal = false;
          } else if (junior.data.data.isshow == 1) {
            console.log("正常！");
          }
        } else if (junior.data.data.code == 1) {
          if (junior.data.data.isshow == 2) {
            that.$router.push({path:'/enterRevise'})
          } else if (junior.data.data.isshow == 3) {
            that.$router.push({path:'/enterOver'})
          }
        } else if (junior.data.data.code == -1) {
          that.$router.push({path:'/enter'})
        }

      }))
      .catch(function(res){
        console.log(res);
      })
    },
    // 导航
    openLocation(latt,lngg,addr){
      var that = this;
      wx.config({
        debug: false,
        appId: that.jssdk.appId,
        timestamp: that.jssdk.timestamp,
        nonceStr: that.jssdk.nonceStr,
        signature: that.jssdk.signature,
        jsApiList: ['chooseImage','uploadImage','openLocation','getLocation']
      });
      wx.ready(function(res){
        var lat = parseFloat(latt);
        var lng = parseFloat(lngg);
        wx.openLocation({
          latitude: lat, // 纬度，浮点数，范围为90 ~ -90
          longitude: lng, // 经度，浮点数，范围为180 ~ -180。
          name: addr, // 位置名
          address: '', // 地址详情说明
          scale: 28, // 地图缩放级别,整形值,范围从1~28。默认为最大
          infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        })
      });
      wx.error(function(res){
        console.log(res);
      })
    },
  },
  filters: {
    numFilter(value){
      let realVal = Number(value).toFixed(2);
      return Number(realVal)
    },
  },
}
</script>




<style scoped>
  button:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
  .index{
    position: relative;
  }
  .tips_out{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
  }
  .tips{
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin-top: -50px;
    color: #fff;
  }
  .tabTit{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    /*width: 100%;*/
    margin: 1.5rem 1rem 0rem;
    border: 1px solid #2ecc80;
    border-radius: 5px;
  }
  .tabTit li {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 2rem;
    line-height: 2rem;
    color: #2ecc80;
  }
  .tabTit li:nth-child(2){
    border-left: 1px solid #2ecc80;
    border-right: 1px solid #2ecc80;
  }
  .tabTit .active{
    background-color: #2ecc80;
    color: #fff;
  }
  /*内容*/
  .tabCon{
    margin-bottom: 5rem;
  }
  /*我的订单*/
  .list{
    width: 100%;
    margin: 0 auto;
    text-align: left;
    /*padding: 0.5rem 0;*/
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin: 1.5rem 0 0.6rem 0;
    position: relative;
  }
  .list:last-child{
    box-shadow: 0 0.0rem 0 0 #fff;
    margin-bottom: 0.0rem;
  }
  .list_tit{
    color: #fff;
    background-color: #2ecc80;
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    font-size: 1.1rem;
  }
  .list_main{
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1rem 0.5rem 0;
    /*border-bottom: 1px solid #B3B3B4;*/
  }
  .list_l{
    /*width: 5rem;*/
    display: table;
    text-align: right;
  }
  .list_r{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .list_main p {
    margin: 0 auto;
    /*height: 1.8rem;*/
    line-height: 1.8rem;
    font-size: 0.9rem;
  }
  .order_addr{
    line-height: 1.8rem;
    font-size: 0.9rem;
    padding: 0 0.5rem 1rem;
  }
  /*按钮*/
  .list_btn{
    justify-content: space-around;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid #B3B3B4;
  }
  .list_btn button {
    border: none;
    font-size: 0.8rem;
    color: #fff;
    border-radius: 0.2rem;
    height: 2rem;
    line-height: 2rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin: 0 1rem;
  }
  .list_btn a {
    border: none;
    font-size: 0.8rem;
    color: #fff;
    border-radius: 0.2rem;
    height: 2rem;
    line-height: 2rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin: 0 0.5rem;
    text-align: center;
    text-decoration: none;
  }
  .list_btn2 button {
    margin: 0 0.5rem;
  }
  .list_btn_blue{
    background-color: #2ecc80;
  }
  .list_btn_red{
    background-color: #FF2976;
  }
  /*金额*/
  .list_sum{
    position: absolute;
    right: 0.5rem;
    top: 3rem;
    text-align: right;
    font-size: 0.8rem;
    color: #595757;
    line-height: 1.8rem;
  }
  .list_sum_actual{
    font-size: 1.5rem;
  }
  /*已取消 && 已完成*/
  .listing,.listed{
    width: 100%;
    margin: 0 auto;
    text-align: left;
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
    line-height: 1.8rem;
    font-size: 0.9rem;
    padding: 1rem 0 1rem;
    position: relative;
  }
  .listing:last-child,.listed:last-child{
    box-shadow: 0 0.0rem 0 0 #fff;
    margin-bottom: 0.0rem;
  }
  .listing p,.listed p{
    justify-content: flex-start;
    align-items: center;
    padding: 0 1rem;
  }
  .list_icon{
    font-size: 0.5rem;
    padding-right: 0.5rem;
    color: #2ecc80;
  }
  .listing p:first-child .list_icon,.listed p:first-child .list_icon{
    color: #18C673;
  }
  .listed_l{
    /*margin-left: 0.8rem;*/
  }
  .listed_btn {
    border: none;
    background-color: #2ecc80;
    color: #fff;
    padding: 0.3rem 0.5rem;
    border-radius: 0.4rem;
    position: absolute;
    right: 0.8rem;
    top: 50%;
    margin-top: -0.8rem;
  }
  /*底部导航*/
  .tab{
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
  }
  .tab_main{
    border-top: 1px solid #797979;
    box-sizing: border-box;
    padding: 0.25rem 0 0;
  }
  .tab_main .active{
    color: #2ECC80;
  }
  .tab_li{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    color: #B5B5B5;
  }
  .tab_li p{
    font-size: 0.9rem;
  }
  .icontab{
    font-size: 1.5rem;
  }
</style>

<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
</style>
